<template>
  <div class="PoitionAdmin">
    <a-card>
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="8">
            <a-form-item label="所属网点" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select
                v-decorator="[
          'affiliatedBranches',
          {rules: [{ required: true, message: '请选择所属网点!' }]}
        ]"
                placeholder="全部"
              >
                <a-select-option
                  v-for="item in branchSelect"
                  :key="item.index"
                  :value="item.branchName"
                >{{item.branchName}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="点位名称" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'poitionName',
          {rules: [{ required: true, message: '请输入点位名称!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="点位状态" :label-col="{ span: 6 }" :wrapper-col="{ span: 16,offset:1}">
              <a-select
                v-decorator="[
          'poitionState',
          {rules: [{ required: true, message: '请选择点位状态!' }]}
        ]"
                placeholder="全部"
              >
                <a-select-option
                  v-for="item in statusSelect"
                  :key="item.index"
                  :value="item.status"
                >{{item.status==3?'待绑定设备':item.status==2?'已点亮':'待点亮'}}</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="30">
          <a-col :span="24" :style="{ textAlign: 'right' }">
            <a-button type="primary" @click="posList()">查询</a-button>
            <a-button type="dashed" @click="listExport()">导出</a-button>
            <a-button htmlType="reset">重置</a-button>
            <router-link to="/home/networkadmin/poitionadmin/poitionadd">
              <a-button style="margin-left:2%;background:rgb(0,240,102);color:white">新增</a-button>
            </router-link>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
    <a-card style="margin-top:2%;">
      <a-table
        :columns="columns"
        :dataSource="data"
        :pagination="pagination"
        @change="handleTableChange"
        :rowKey="record => record.id"
        :bordered="true"
      >
        <template slot="affiliatedBranches" slot-scope="text,record">
          <span>{{record.branchName==null?"无":record.branchName}}</span>
        </template>
        <template slot="poitionSite" slot-scope="text,record">
          <span>{{record.address}}</span>
        </template>
        <template slot="deviceNumber" slot-scope="text,record">
          <span
            :class="record.devNum==0?'':'blue'"
            @click="record.devNum==0?'':getFacilityModal(text,record)"
          >{{record.devNum}}</span>
        </template>
        <template slot="partnerNumber" slot-scope="text,record">
          <div
            :class="record.partnerNum==0?'':'blue'"
            @click="record.partnerNum==0?'':partnerNumModal(text,record)"
          >{{record.partnerNum}}</div>
          <div class="blue" @click="partnerModal(text,record)">管理合作方</div>
        </template>
        <template slot="poitionState" slot-scope="text,record">
          <span>{{record.status==3?'待绑定设备':record.status==4?'已撤机':record.status==2?'已点亮':'待点亮'}}</span>
        </template>
        <template slot="operation" slot-scope="text,record">
          <div class="blue">
            <span @click="findTellerModal(text,record)">巡柜员管理</span>
            <span @click="facilityModal(text,record)">设备管理</span>
          </div>
          <div>
            <span class="blue" @click="detailsModal(text,record)">详情</span>
            <span class="blue" @click="editShowPos(text,record)">编辑</span>
            <span class="red" @click="showDeleteConfirm(text,record)">删除</span>
            <span
              :class="record.status==2?'':'bright'"
              @click="record.status==2?'':brightConfirm(text,record)"
            >{{record.status==2?'已点亮':'确认电亮'}}</span>
          </div>
        </template>
      </a-table>
    </a-card>
    <a-modal
      title="查看设备"
      :visible="getFacilityVisible"
      @ok="getFacilityOk"
      @cancel="getFacilityCancel"
      :footer="null"
    >
      <a-table
        style="margin-top:2%"
        :columns="columnsGetFacility"
        :dataSource="dataGetFacility"
        :pagination="false"
        :bordered="true"
        :rowKey="record => record.devId"
      >
        <template slot="number" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      :title="partnerNumTitle"
      :visible="partnerNumVisible"
      @ok="partnerNumOk"
      @cancel="partnerNumCancel"
      :footer="null"
    >
      <a-table
        style="margin-top:2%"
        :columns="columnsPartnerNum"
        :dataSource="dataPartnerNum"
        :pagination="false"
        :bordered="true"
        :rowKey="record => record.id"
      >
        <template slot="number" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
        <template slot="fenRunProportion" slot-scope="text,record">
          <span>{{record.distributionRatio==null?0:record.distributionRatio}}</span>
        </template>
      </a-table>
    </a-modal>
    <a-modal
      title="合作方管理"
      :visible="partnerVisible"
      @ok="partnerOk"
      @cancel="partnerCancel"
      :footer="null"
      :width="700"
    >
      <a-row>
        <a-col :span="24" style="text-align: right">
          <a-button
            style="background:rgb(0,240,102);color:white;"
            @click="addPartnerModal()"
            v-show="isAddPartner"
          >新增合作方</a-button>
          <a-button
            type="primary"
            style="margin: 0 2%;"
            v-show="isEditProportion"
            @click="setProportion"
          >设置分润比例</a-button>
          <a-button
            style="margin: 0 2%;background:rgb(0,240,102);color:white;"
            v-show="isFinish"
            @click="posUpdate()"
          >完成分润比例设置</a-button>
          <a-button
            style="margin: 0 2%;background:rgb(245,34,45);color:white;"
            v-show="isCancel"
            @click="setCancel()"
          >取消</a-button>
          <a-button
            style="background:rgb(255,166,19);color:white;"
            v-show="isDeletePartner"
            @click="delPartner()"
          >删除合作方</a-button>
          <a-button
            style="margin: 0 2%;background:rgb(0,240,102);color:white;"
            v-show="isDelCancel"
            @click="DelCancel"
          >取消</a-button>
          <a-button
            style="margin: 0 2%;background:rgb(245,34,45);color:white;"
            v-show="isDelOk"
            @click="unbindPar()"
          >删除</a-button>
        </a-col>
      </a-row>
      <a-table
        style="margin-top:2%"
        :columns="columnsPartner"
        :dataSource="dataPartner"
        :pagination="false"
        :bordered="true"
        :locale="locale"
        :rowKey="record => record.id"
        :rowSelection="{selectedRowKeys: selectedKeysPartner,onChange: onSelectChangePartner,}"
      >
        <template slot="number" slot-scope="text,record,index">
          <span>{{index+1}}</span>
        </template>
        <template slot="fenRunProportion" slot-scope="text,record">
          <span>{{record.distributionRatio==null?'0':record.distributionRatio}}</span>
          <a-input
            v-show="isInput"
            :value="text"
            @change="e => inputNumberChange(e.target.value,record.id)"
            style="width:35%;margin-left:5%"
          />
        </template>
      </a-table>
    </a-modal>
    <a-modal
      title="新增合作方"
      :visible="addPartnerVisible"
      @ok="addPartnerOk"
      @cancel="addPartnerCancel"
      okText="新增"
    >
      <a-form :form="form">
        <a-row>
          <a-col :span="20">
            <a-form-item
              label="合作方名称"
              :label-col="{ span: 6}"
              :wrapper-col="{ span: 10, offset: 1}"
            >
              <a-input
                placeholder="请输入"
                v-decorator="[
              'partnerName',
              {rules: [{ required: true, message: '请输入合作方名称!' }]}
            ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="4">
            <a-button style="margin-left:2%;" @click="partnerUnbind()">查询</a-button>
          </a-col>
        </a-row>
      </a-form>
      <a-table
        style="margin-top:2%"
        :columns="columnsAddPartner"
        :dataSource="dataAddPartner"
        :pagination="false"
        :bordered="true"
        :rowSelection="{selectedRowKeys: selectedKeysAddPartner,onChange: onSelectChangeAddPartner,onSelect: onSelectAddPartner}"
        :rowKey="record => record.id"
      >
        <!-- <template slot="fenRunProportion" slot-scope="text,record">
          <span>{{record.distributionRatio}}</span>
        </template>-->
      </a-table>
    </a-modal>
    <a-modal
      title="巡柜员管理"
      :visible="findTellerVisible"
      @ok="isBinding=='绑定'?findTellerOk():findoutOk()"
      @cancel="findTellerCancel"
      :okText="isBinding"
    >
      <a-tabs defaultActiveKey="1" @change="findTellerChange">
        <a-tab-pane tab="已绑定" key="1">
          <a-table
            style="margin-top:2%"
            :columns="columnsFindTeller"
            :dataSource="dataFindTeller"
            :pagination="false"
            :bordered="true"
            :rowKey="record => record.employeeId"
            :rowSelection="{selectedRowKeys: selectedKeysFindTeller,onChange: onSelectChangeFindTeller}"
          ></a-table>
        </a-tab-pane>
        <a-tab-pane tab="未绑定" key="2" forceRender>
          <a-table
            style="margin-top:2%"
            :columns="columnsFindTellerNot"
            :dataSource="dataFindTellerNot"
            :pagination="false"
            :bordered="true"
            :rowKey="record => record.employeeId"
            :rowSelection="{selectedRowKeys: selectedKeysFindTellerNot,onChange: onSelectChangeFindTellerNot}"
          ></a-table>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
    <a-modal
      title="设备管理"
      :visible="facilityVisible"
      @ok="isBinding=='绑定'?facilityOk():facilityoutOk()"
      @cancel="facilityCancel"
      :okText="isBinding"
      :width="700"
    >
      <a-form :form="form">
        <a-row :gutter="30">
          <a-col :span="12">
            <a-form-item label="设备编号" :label-col="{ span: 6}" :wrapper-col="{ span: 16, offset: 1}">
              <a-input
                placeholder="请输入"
                v-decorator="[
          'facilityNumber',
          {rules: [{ required: true, message: '请输入设备编号!' }]}
        ]"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12" style="text-align:right;margin-top:1%">
            <a-button type="primary">查询</a-button>
          </a-col>
        </a-row>
      </a-form>
      <a-tabs defaultActiveKey="1" @change="tbsChange">
        <a-tab-pane tab="已绑定" key="1">
          <a-table
            style="margin-top:2%"
            :columns="columnsFacility"
            :dataSource="dataFacility"
            :pagination="false"
            :bordered="true"
            :rowKey="record => record.devId"
            :rowSelection="{selectedRowKeys: selectedKeysFacility,onChange: onSelectChangeFacility}"
          ></a-table>
        </a-tab-pane>
        <a-tab-pane tab="未绑定" key="2" forceRender>
          <a-table
            style="margin-top:2%"
            :columns="columnsFacilityNot"
            :dataSource="dataFacilityNot"
            :pagination="false"
            :bordered="true"
            :rowKey="record => record.devId"
            :rowSelection="{selectedRowKeys: selectedKeysFacilityNot,onChange: onSelectChangeFacilityNot}"
          ></a-table>
        </a-tab-pane>
      </a-tabs>
    </a-modal>
    <a-modal
      title="点位详情"
      :visible="detailsVisible"
      @ok="detailsOk"
      @cancel="detailsCancel"
      :footer="null"
    >
      <div>
        <p>
          点位名称：
          <span>{{posName}}</span>
        </p>
        <p>
          所属城市：
          <span>{{addrCity}}</span>
        </p>
        <p>
          场景：
          <span>{{scene}}</span>
        </p>
        <p>
          人数：
          <span>{{population}}</span>
        </p>
        <p>
          人员性别：
          <span>{{sexStructure}}</span>
        </p>
        <p>
          人员年龄：
          <span>{{ageStructure}}</span>
        </p>
        <p>
          竞品台数：
          <span>{{competitorDevNumbers}}</span>
        </p>
        <p>
          备注信息：
          <span>{{description}}</span>
        </p>
        <p>
          点亮时间：
          <span>{{lightTime}}</span>
        </p>
      </div>
    </a-modal>
  </div>
</template>

<script src="./PoitionAdmin.js">
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.PoitionAdmin {
  width: 100%;
}

.ant-btn-primary,
.ant-btn-dashed {
  margin-right: 10px;
}

.bright {
  color: #ff7f24;
  cursor: pointer;
}
</style>
